<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微信企业号-应用消息推送</title>
    <link rel="stylesheet" href="/css/zui.min.css">
</head>
<body>
[#if status??]
<div>
    <h4>${error_message}</h4>
</div>
[#else]
<div class="container-fixed-md">
    <ol class="breadcrumb" style="margin-top: 15px;margin-bottom: 0px;">
        <li><a href="/"><i class="icon icon-home"></i> 首页</a></li>
        <li><a href="/chats?agent_id=${agent.agentId}"> 群聊会话</a></li>
        <li class="active">创建群聊</li>
    </ol>
    <hr style="margin-top: 0px; margin-bottom: 0px;">
</div>

<div class="container-fixed-md">
    <form class="form-horizontal" style="margin-top: 20px;" id="create-form">
        <div class="form-group">
            <label for="name" class="col-sm-2">群聊名</label>
            <div class="col-md-10 col-sm-10">
                <input type="text" class="form-control" id="name" name="name"
                       placeholder="">
            </div>
        </div>
        <div class="form-group">
            <label for="owner" class="col-sm-2">群主</label>
            <div class="col-md-10 col-sm-10">
                <input type="text" class="form-control" id="owner" name="owner"
                       placeholder="如果不指定，系统会随机从群成员中选一人作为群主">
            </div>
        </div>
        <div class="form-group">
            <label for="userlist" class="col-sm-2">群成员</label>
            <div class="col-md-10 col-sm-10">
                <input type="text" class="form-control" id="userlist" name="userlist"
                       placeholder="用‘|’隔开，至少2人，至多500人">
            </div>
        </div>
        <input type="hidden" id="agentid" name="agentid" value="${agent.agentId}">
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button id="create-btn" type="button" class="btn btn-primary">创建</button>
            </div>
        </div>
    </form>
</div>


<script src="/js/jquery1.8.1.js"></script>
<script src="/js/zui.min.js"></script>
<script type="text/javascript">
    // 序列化JSON字符串
    $.fn.serializeObject = function () {
        let o = {};
        let a = this.serializeArray();
        $.each(a, function () {
            let value = this.value;
            let chain = this.name.split(".");
            let c = o;
            $.each(chain, function (i, e) {
                if (i === (chain.length - 1)) {
                    if (c[e]) {
                        if (!c[e].push) {
                            c[e] = [c[e]];
                        }
                        c[e].push(value || '');
                    } else {
                        c[e] = value || '';
                    }
                } else {
                    if (!c[e]) {
                        c[e] = {};
                    }
                }
                c = o[e];
            });
        });
        return o;
    };

    var agent_id = '${agent.agentId}';
    var sendMessage = function (msg) {
        if (agent_id == null || agent_id == '' || agent_id == undefined) {
            alert("应用ID不能为空");
            return false;
        }
        $.ajax({
            url: '/appchat?agent_id=' + agent_id,
            type: 'POST',
            dataType: 'json',
            contentType:"application/json",
            data: msg,
            beforeSend: function () {
                console.log(agent_id + ' start send message');
            },
            success: function (result) {
                console.log(result);
                if (result.status == 'ok') {
                    new $.zui.Messager('  提示消息：成功!', {
                        type: 'success',
                        time: 3000
                    }).show();
                } else {
                    new $.zui.Messager('  提示消息：' + result.status + '!', {
                        type: 'danger',
                        time: 3000
                    }).show();
                }
            },
            error: function () {
                new $.zui.Messager('  提示消息：请求失败!', {
                    type: 'danger',
                    time: 5000
                }).show();
            },
            complete: function () {

            }
        });
    }

    $('#create-btn').on('click', function () {

        var form = $('#create-form').serializeObject();
        var users = $('#userlist').val();
        var userArray = users.split('|');
        if(userArray.length < 2){
            alert("成员不能少于2人");
        } else {
            var jsonArray = [];
        }
        form.userlist = userArray;
        console.log(JSON.stringify(form));
        sendMessage(JSON.stringify(form));
    });
</script>
[/#if]
</body>
</html>